+++ /dev/null
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
- "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
-]>
-<refentry id="chap-css-overview">
-<refmeta>
-<refentrytitle>GTK CSS Overview</refentrytitle>
-<manvolnum>3</manvolnum>
-<refmiscinfo>GTK Library</refmiscinfo>
-</refmeta>
-
-<refnamediv>
-<refname>GTK CSS Overview</refname>
-<refpurpose>
-The language used for style information in GTK
-</refpurpose>
-</refnamediv>
-
-<refsect1 id="css">
- <title>CSS in GTK</title>
-
- <para>
- This chapter describes how GTK uses CSS for styling and layout.
- It is not meant to be an explanation of CSS from first principles,
- but focuses on listing supported CSS features and differences
- between Web CSS and GTK.
- </para>
-
- <para>
- There is plenty of introductory documentation available that
- can be used to learn about CSS in general. In the tables below
- we include links to the official specs that can be used to look
- up the definition of individual selectors and properties.
- </para>
-
- <refsect2>
- <title>CSS nodes</title>
-
- <para>
- GTK applies the style information found in style sheets by matching
- the selectors against a tree of nodes. Each node in the tree has a
- name, a state and possibly style classes. The children of each node
- are linearly ordered.
- </para>
-
- <para>
- Every widget has one or more of these CSS nodes, and determines their
- name, state, style classes and how they are layed out as children and
- siblings in the overall node tree. The documentation for each widget
- explains what CSS nodes it has.
- </para>
-
- <example>
- <title>The CSS nodes of a GtkScale</title>
- <programlisting><![CDATA[
-scale[.fine-tune]
-├── marks.top
-│ ├── mark
-┊ ┊
-│ ╰── mark
-├── trough
-│ ├── slider
-│ ├── [highlight]
-│ ╰── [fill]
-╰── marks.bottom
- ├── mark
- ┊
- ╰── mark
-]]></programlisting>
- </example>
-
- </refsect2>
-
- <refsect2>
- <title>Selectors</title>
-
- <para>
- Selectors work very similar to the way they do on the web.
- </para>
-
- <para>
- All widgets have one or more CSS nodes with element names and style
- classes. When style classes are used in selectors, they have to be prefixed
- with a period. Widget names can be used in selectors like IDs. When used
- in a selector, widget names must be prefixed with a # character.
- </para>
-
- <table>
- <title>GTK CSS Selectors</title>
- <tgroup cols="3">
- <thead>
- <row><entry>Pattern</entry><entry>Reference</entry><entry>Notes</entry></row>
- </thead>
- <tbody>
- <row>
- <entry>*</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#universal-selector">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#type-selectors">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E.class</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#class-html">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
-
- <row>
- <entry>E#id</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#id-selectors">CSS Selectors Level 3</ulink></entry>
- <entry>GTK uses the widget name as ID</entry>
- </row>
- <row>
- <entry>E:nth-child(nth-child)</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:nth-last-child(nth-child)</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:first-child</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:last-child</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:only-child</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#structural-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry>Equivalent to E:first-child:last-child</entry>
- </row>
- <row>
- <entry>E:link, E:visited</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#link">CSS Selectors Level 3</ulink></entry>
- <entry>Corresponds to GTK_STATE_FLAG_LINK and GTK_STATE_FLAGS_VISITED</entry>
- </row>
- <row>
- <entry>E:active, E:hover, E:focus</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#useraction-pseudos">CSS Selectors Level 3</ulink></entry>
- <entry>Correspond to GTK_STATE_FLAG_ACTIVE, GTK_STATE_FLAG_PRELIGHT, GTK_STATE_FLAGS_FOCUSED</entry>
- </row>
- <row>
- <entry>E:focus-within</entry>
- <entry><ulink url="https://drafts.csswg.org/selectors/#focus-within-pseudo">CSS Selectors Level 4</ulink></entry>
- <entry>Set on all ancestors of the focus widget, unlike CSS</entry>
- </row>
- <row>
- <entry>E:focus-visible</entry>
- <entry><ulink url="https://drafts.csswg.org/selectors/#the-focus-visible-pseudo">CSS Selectors Level 4</ulink></entry>
- <entry>Set on focus widget and all ancestors, unlike CSS</entry>
- </row>
- <row>
- <entry>E:disabled</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#UIstates">CSS Selectors Level 3</ulink></entry>
- <entry>Corresponds to GTK_STATE_FLAG_INSENSITIVE</entry>
- </row>
- <row>
- <entry>E:checked</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#UIstates">CSS Selectors Level 3</ulink></entry>
- <entry>Corresponds to GTK_STATE_FLAG_CHECKED</entry>
- </row>
- <row>
- <entry>E:indeterminate</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#indeterminate">CSS3 Selectors Level 3</ulink></entry>
- <entry>Corresponds to GTK_STATE_FLAG_INCONSISTENT</entry>
- </row>
- <row>
- <entry>E:backdrop, E:selected</entry>
- <entry></entry>
- <entry>Corresponds to GTK_STATE_FLAG_BACKDROP, GTK_STATE_FLAG_SELECTED</entry>
- </row>
- <row>
- <entry>E:not(selector)</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#negation">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:dir(ltr), E:dir(rtl)</entry>
- <entry><ulink url="https://drafts.csswg.org/selectors/#the-dir-pseudo">CSS Selectors Level 4</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E:drop(active)</entry>
- <entry><ulink url="https://drafts.csswg.org/selectors/#drag-pseudos">CSS Selectors Level 4</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E F</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#descendent-combinators">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E > F</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#child-combinators">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E ~ F</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#general-sibling-combinators">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- <row>
- <entry>E + F</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators">CSS Selectors Level 3</ulink></entry>
- <entry></entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- </refsect2>
-
-</refsect1>
-
-<refsect1 id="css-properties">
- <title>GTK CSS Properties</title>
-
- <para>
- GTK supports CSS properties and shorthands as far as they can be applied
- in the context of widgets, and adds its own properties only when needed.
- All GTK-specific properties have a -gtk prefix.
- </para>
-
- <refsect2>
- <title>Basic types</title>
-
- <para>
- All properties support the following keywords: inherit, initial, unset, with
- the same meaning as defined in the <ulink url="https://www.w3.org/TR/css3-cascade/#defaulting-keywords">CSS Cascading and Inheritance</ulink> spec.
- </para>
-
- <para>
- The following units are supported for basic datatypes:
- </para>
-
- <variablelist>
- <varlistentry>
- <term>Length</term><listitem> px, pt, em, ex, rem, pc, in, cm, mm, calc()</listitem>
- </varlistentry>
- <varlistentry>
- <term>Percentage</term><listitem> %, calc()</listitem>
- </varlistentry>
- <varlistentry>
- <term>Angle</term><listitem> deg | grad | turn, calc()</listitem>
- </varlistentry>
- <varlistentry>
- <term>Time </term><listitem> s | ms, calc()</listitem>
- </varlistentry>
- </variablelist>
-
- <para>
- Length values with the em or ex units are resolved using the font
- size value, unless they occur in setting the font-size itself, in
- which case they are resolved using the inherited font size value.
- </para>
-
- <para>
- The rem unit is resolved using the initial font size value, which is
- not quite the same as the CSS definition of rem.
- </para>
-
- <para>
- The calc() notation adds considerable expressive power. There are limits
- on what types can be combined in such an expression (e.g. it does not make
- sense to add a number and a time). For the full details, see the
- <ulink url="https://www.w3.org/TR/css3-values/#calc-notation">CSS3 Values and
- Units</ulink> spec.
- </para>
-
- <para>
- A common pattern among shorthand properties (called 'four sides') is one
- where one to four values can be specified, to determine a value for each
- side of an area. In this case, the specified values are interpreted as
- follows:
- <variablelist>
- <varlistentry>
- <term>4 values: </term><listitem>top right bottom left</listitem>
- </varlistentry>
- <varlistentry>
- <term>3 values: </term><listitem>top horizontal bottom</listitem>
- </varlistentry>
- <varlistentry>
- <term>2 values: </term><listitem>vertical horizontal</listitem>
- </varlistentry>
- <varlistentry>
- <term>1 value: </term><listitem>all</listitem>
- </varlistentry>
- </variablelist>
- </para>
-
- </refsect2>
-
- <refsect2>
- <title>Colors</title>
-
- <para>
- GTK extends the CSS syntax with several additional ways to specify colors.
- </para>
- <para>
- The first is a reference to a color defined via a @define-color rule in CSS.
- The syntax for @define-color rules is as follows:
- <simplelist>
- <member><literal>@define-color <replaceable>Name</replaceable> <replaceable>Color</replaceable></literal></member>
- </simplelist>
- </para>
- <para>
- To refer to the color defined by a @define-color rule, prefix the name with @.
- </para>
- <para>
- GTK also supports color expressions, which allow colors to be transformed to
- new ones. Color expressions can be nested, providing a rich language to
- define colors. Color expressions resemble functions, taking 1 or more colors
- and in some cases a number as arguments.
- <simplelist>
- <member><literal>lighter(<replaceable>Color</replaceable>)</literal> produces a brigher variant of Color</member>
- <member><literal>darker(<replaceable>Color</replaceable>)</literal> produces a darker variant of Color</member>
- <member><literal>shade(<replaceable>Color</replaceable>, <replaceable>Number</replaceable>)</literal> changes the lightness of Color. The number ranges from 0 for black to 2 for white.</member>
- <member><literal>alpha(<replaceable>Color</replaceable>, <replaceable>Number</replaceable>)</literal> replaces the alpha value of color with number (between 0 and 1)</member>
- <member><literal>mix(<replaceable>Color1</replaceable>, <replaceable>Color2</replaceable>, <replaceable>Number</replaceable>)</literal> interpolates between the two colors</member>
- </simplelist>
- </para>
- </refsect2>
-
- <refsect2>
- <title>Images</title>
- <para>
- GTK extends the CSS syntax for images and also uses it for specifying icons.
- To load a themed icon, use
- <simplelist>
- <member><literal>-gtk-icontheme(<replaceable>Name</replaceable>)</literal></member>
- </simplelist>
- The specified icon name is used to look up a themed icon, while taking into
- account the values of the -gtk-icon-palette property.
- This kind of image is mainly used as value of the -gtk-icon-source property.
- </para>
- <para>
- Symbolic icons from the icon theme are recolored according to the
- -gtk-icon-palette property, which defines a list of named colors.
- The recognized names for colors in symbolic icons are error, warning
- and success. The default palette maps these three names to symbolic
- colors with the names @error_color, @warning_color and @success_color
- respectively. The syntax for defining a custom palette is a comma-separated
- list of name-color pairs, e.g.
- <simplelist>
- <member><literal>success blue, warning #fc3, error magenta</literal></member>
- </simplelist>
- </para>
- <para>
- Recoloring is sometimes needed for images that are not part of an icon theme,
- and the
- <simplelist>
- <member><literal>-gtk-recolor(<replaceable>uri</replaceable>, <replaceable>palette</replaceable>)</literal></member>
- </simplelist>
- syntax makes this available. -gtk-recolor requires a url as first argument.
- The remaining arguments specify the color palette to use. If the palette is
- not explicitly specified, the current value of the -gtk-icon-palette property
- is used.
- </para>
- <para>
- GTK supports scaled rendering on hi-resolution displays. This works best if
- images can specify normal and hi-resolution variants. From CSS, this can be
- done with
- <simplelist>
- <member><literal>-gtk-scaled(<replaceable>Image1</replaceable>, <replaceable>Image2</replaceable>)</literal></member>
- </simplelist>
- </para>
-
- </refsect2>
-
- <table pgwide="1">
- <title>GTK CSS Properties</title>
- <tgroup cols="3">
- <colspec align="left" colnum="1" colname="name"/>
- <colspec align="left" colnum="2" colname="references"/>
- <colspec align="left" colnum="3" colname="notes"/>
- <spanspec namest="name" nameend="notes" spanname="span"/>
- <thead>
- <row><entry spanname="span">Color and Filter Properties</entry></row>
- <row><entry>Name</entry><entry>Reference</entry><entry>Notes</entry></row>
- </thead>
- <tbody>
- <row>
- <entry>color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-color/#foreground">CSS Color Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>opacity</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-color/#opacity">CSS Color Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>filter</entry>
- <entry>
- <ulink url="https://drafts.fxtf.org/filters/#FilterProperty">CSS Filter Effects Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row style="title"><?dbhtml class="subhead"?><entry spanname="span">Font Properties</entry></row>
- <row>
- <entry>font-family</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-family-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry>defaults to gtk-font-name setting</entry>
- </row>
- <row>
- <entry>font-size</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-size-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry>defaults to gtk-font-name setting</entry>
- </row>
- <row>
- <entry>font-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-style-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#descdef-font-variant">CSS Fonts Level 3</ulink>
- </entry>
- <entry>only CSS2 values supported</entry>
- </row>
- <row>
- <entry>font-weight</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-weight-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-stretch</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-kerning</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-kerning-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-ligatures</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-ligatures-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-position</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-caps</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-position-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-numeric</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-numeric-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-alternates</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variant-east-asian</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-east-asian-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-feature-settings</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-feature-settings-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>font-variation-settings</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def">CSS Fonts Level 4</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>-gtk-dpi</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-values/#number-value">Number</ulink></entry>
- <entry>defaults to screen resolution</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry namest="name" nameend="notes">Font Shorthands</entry></row>
- <row>
- <entry>font</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry>CSS allows line-height, etc</entry>
- </row>
- <row>
- <entry>font-variant</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-fonts/#font-variant-prop">CSS Fonts Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row><?dbhtml class="subhead"?><entry spanname="span">Text Caret Properties</entry></row>
- <row>
- <entry>caret-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry>CSS allows an auto value</entry>
- </row>
- <row>
- <entry>-gtk-secondary-caret-color</entry>
- <entry><ulink url="https://www.w3.org/TR/css-color-3/#valuea-def-color">Color</ulink></entry>
- <entry>used for the secondary caret in bidirectional text</entry>
- </row>
- <row><?dbhtml class="subhead"?><entry spanname="span">Text Decoration Properties</entry></row>
- <row>
- <entry>letter-spacing</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-text/#letter-spacing">CSS Text Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>text-decoration-line</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">CSS Text Decoration Level 3</ulink>
- </entry>
- <entry>CSS allows overline</entry>
- </row>
- <row>
- <entry>text-decoration-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS Text Decoration Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>text-decoration-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS Text Decoration Level 3</ulink>
- </entry>
- <entry>CSS allows dashed and dotted</entry>
- </row>
- <row>
- <entry>text-shadow</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS Text Decoration Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row><?dbhtml class="subhead"?><entry spanname="span">Text Decoration Shorthands</entry></row>
- <row>
- <entry>text-decoration</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS Text Decoration Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row><?dbhtml class="subhead"?><entry spanname="span">Icon Properties</entry></row>
- <row>
- <entry>-gtk-icon-source</entry>
- <entry><ulink url="https://www.w3.org/TR/css-backgrounds-3/#typedef-image">Image</ulink>, <literal>builtin</literal> or <literal>none</literal></entry>
- <entry>used for builtin icons in buttons and expanders</entry>
- </row>
- <row>
- <entry>-gtk-icon-size</entry>
- <entry><ulink url="https://www.w3.org/TR/css3-values/#length-value">Length</ulink></entry>
- <entry>size used for builtin icons in buttons and expanders</entry>
- </row>
- <row>
- <entry>-gtk-icon-style</entry>
- <entry><literal>requested</literal>, <literal>regular</literal> or <literal>symbolic</literal></entry>
- <entry>preferred style for application-loaded icons</entry>
- </row>
- <row>
- <entry>-gtk-icon-transform</entry>
- <entry>
- <ulink url="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list">Transform list</ulink> or <literal>none</literal>
- </entry>
- <entry>applied to builtin and application-loaded icons</entry>
- </row>
- <row>
- <entry>-gtk-icon-palette</entry>
- <entry>Color palette, as explained above</entry>
- <entry>used to recolor symbolic icons</entry>
- </row>
- <row>
- <entry>-gtk-icon-shadow</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow">Shadow</ulink> or <literal>none</literal>
- </entry>
- <entry>applied to builtin and application-loaded icons</entry>
- </row>
- <row>
- <entry>-gtk-icon-filter</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/filter-effects-1/#typedef-filter-value-list">Filter value list</ulink> or <literal>none</literal>
- </entry>
- <entry>applied to builtin and application-loaded icons</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Box Properties</entry></row>
- <row>
- <entry>transform</entry>
- <entry>
- <ulink url="https://drafts.csswg.org/css-transforms-2/">CSS Transforms Level 2</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>min-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#min-width">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
- <row>
- <entry>min-height</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#min-height">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
- <row>
- <entry>margin-top</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#margin-top">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages or auto</entry>
- </row>
- <row>
- <entry>margin-right</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#margin-right">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages or auto</entry>
- </row>
- <row>
- <entry>margin-bottom</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#margin-bottom">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages or auto</entry>
- </row>
- <row>
- <entry>margin-left</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#margin-left">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages or auto</entry>
- </row>
- <row>
- <entry>padding-top</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#padding-top">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
- <row>
- <entry>padding-right</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#padding-right">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
- <row>
- <entry>padding-bottom</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#padding-bottom">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
- <row>
- <entry>padding-left</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#padding-left">CSS Box Model Level 3</ulink>
- </entry>
- <entry>CSS allows percentages</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Box Shorthands</entry></row>
- <row>
- <entry>margin</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#margin">CSS Box Model Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
- <row>
- <entry>padding</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-box/#padding">CSS Box Model Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Border Properties</entry></row>
- <row>
- <entry>border-top-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink></entry>
- <entry>CSS allows other values</entry>
- </row>
- <row>
- <entry>border-right-width</entry>
- <entry>
- <ulink url="https://www.w3.org/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>CSS allows other values</entry>
- </row>
- <row>
- <entry>border-bottom-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>CSS allows other values</entry>
- </row>
- <row>
- <entry>border-left-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>CSS allows other values</entry>
- </row>
- <row>
- <entry>border-top-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-right-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-bottom-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-left-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-top-right-radius</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-bottom-right-radius</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-bottom-left-radius</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-top-left-radius</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-top-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-right-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-bottom-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-left-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-image-source</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-image-source">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-image-repeat</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-image-repeat">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-image-slice</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-image-slice">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
- <row>
- <entry>border-image-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR//css3-background/#the-border-image-width">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Border Shorthands</entry></row>
- <row>
- <entry>border-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
- <row>
- <entry>border-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
- <row>
- <entry>border-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>a 'four sides' property</entry>
- </row>
- <row>
- <entry>border-top</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-top">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-right</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-right">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-bottom</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-bottom">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-left</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-left">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-radius</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-radius">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>border-image</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#border-image">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Outline Properties</entry></row>
- <row>
- <entry>outline-style</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#outline-style">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry>initial value is none, auto is not supported</entry>
- </row>
- <row>
- <entry>outline-width</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#outline-width">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>outline-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#outline-color">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry>initial value is currentColor, invert is not supported</entry>
- </row>
- <row>
- <entry>outline-offset</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Outline Shorthands</entry></row>
- <row>
- <entry>outline</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS Basic User Interface Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Background Properties</entry></row>
- <row>
- <entry>background-color</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-color">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-clip</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-clip">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-origin</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-origin">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-size</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-size">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-position</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-position">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-repeat</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-repeat">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-image</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background-image">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry>not supported: urls without quotes, colors in crossfades</entry>
- </row>
- <row>
- <entry>box-shadow</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#box-shadow">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>background-blend-mode</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/compositing-1/#propdef-background-blend-mode">CSS Compositing and Blending Level 1</ulink>
- </entry>
- <entry>only affects multiple backgrounds</entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Background Shorthands</entry></row>
- <row>
- <entry>background</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-background/#background">CSS Backgrounds and Borders Level 3</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Transition Properties</entry></row>
- <row>
- <entry>transition-property</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-transitions/#transition-property">CSS Transitions</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>transition-duration</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-transitions/#transition-duration">CSS Transitions</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>transition-timing-function</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS Transitions</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>transition-delay</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-transitions/#transition-delay">CSS Transitions</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Transition Shorthands</entry></row>
- <row>
- <entry>transition</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-transitions/#transition">CSS Transitions</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Animation Properties</entry></row>
- <row>
- <entry>animation-name</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-name">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-duration</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-duration">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-timing-function</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-timing-function">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-iteration-count</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-direction</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-direction">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-play-state</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-play-state">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-delay</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-delay">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
- <row>
- <entry>animation-fill-mode</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Animation Shorthands</entry></row>
- <row>
- <entry>animation</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS Animations Level 1</ulink>
- </entry>
- <entry></entry>
- </row>
-
- <row><?dbhtml class="subhead"?><entry spanname="span">Table-related Properties</entry></row>
- <row>
- <entry>border-spacing</entry>
- <entry>
- <ulink url="https://www.w3.org/TR/css-tables-3/#border-spacing-property">CSS Table Level 3</ulink>
- </entry>
- <entry>respected by GtkBox and GtkGrid</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
-</refsect1>
-</refentry>
--- /dev/null
+# GTK CSS Properties
+
+GTK supports CSS properties and shorthands as far as they can be applied
+in the context of widgets, and adds its own properties only when needed.
+All GTK-specific properties have a -gtk prefix.
+
+## Basic types
+
+All properties support the following keywords: inherit, initial, unset,
+with the same meaning as defined in the
+[CSS Cascading and Inheritance](https://www.w3.org/TR/css3-cascade/#defaulting-keywords)
+spec.
+
+The following units are supported for basic datatypes:
+
+Length
+ : px, pt, em, ex, rem, pc, in, cm, mm, calc()
+Percentage
+ : %, calc()
+Angle
+ : deg | grad | turn, calc()
+Time
+ : s | ms, calc()
+
+Length values with the em or ex units are resolved using the font
+size value, unless they occur in setting the font-size itself, in
+which case they are resolved using the inherited font size value.
+
+The rem unit is resolved using the initial font size value, which is
+not quite the same as the CSS definition of rem.
+
+The calc() notation adds considerable expressive power. There are limits
+on what types can be combined in such an expression (e.g. it does not make
+sense to add a number and a time). For the full details, see the
+[CSS3 VAlues and Units](https://www.w3.org/TR/css3-values/#calc-notation)
+spec.
+
+A common pattern among shorthand properties (called 'four sides') is one
+where one to four values can be specified, to determine a value for each
+side of an area. In this case, the specified values are interpreted as
+follows:
+
+4 values:
+ : top right bottom left
+3 values:
+ : top horizontal bottom
+2 values:
+ : vertical horizontal
+1 value:
+ : all
+
+## Colors
+
+GTK extends the CSS syntax with several additional ways to specify colors.
+
+The first is a reference to a color defined via a @define-color rule in CSS.
+The syntax for @define-color rules is as follows:
+
+```
+@define-color Name Color
+```
+
+To refer to the color defined by a @define-color rule, prefix the name with @.
+
+GTK also supports color expressions, which allow colors to be transformed to
+new ones. Color expressions can be nested, providing a rich language to
+define colors. Color expressions resemble functions, taking 1 or more colors
+and in some cases a number as arguments.
+
+`lighter(Color)`
+ : produces a brigher variant of Color
+`darker(Color)`
+ : produces a darker variant of Color
+`shade(Color, Number)`
+ : changes the lightness of Color. The number ranges from 0 for black to 2 for white.
+`alpha(Color, Number)`
+ : replaces the alpha value of color with number (between 0 and 1)
+`mix(Color1, Color2, Number)`
+ : interpolates between the two colors
+
+## Images
+
+GTK extends the CSS syntax for images and also uses it for specifying icons.
+To load a themed icon, use
+
+```
+-gtk-icontheme(Name)
+```
+
+The specified icon name is used to look up a themed icon, while taking into
+account the values of the -gtk-icon-palette property. This kind of image is
+mainly used as value of the -gtk-icon-source property.
+
+Symbolic icons from the icon theme are recolored according to the
+-gtk-icon-palette property, which defines a list of named colors.
+The recognized names for colors in symbolic icons are error, warning
+and success. The default palette maps these three names to symbolic
+colors with the names @error_color, @warning_color and @success_color
+respectively. The syntax for defining a custom palette is a comma-separated
+list of name-color pairs, e.g.
+
+```
+success blue, warning #fc3, error magenta
+```
+
+Recoloring is sometimes needed for images that are not part of an icon theme,
+and the
+
+```
+-gtk-recolor(uri, palette)
+```
+
+syntax makes this available. -gtk-recolor requires a url as first argument.
+The remaining arguments specify the color palette to use. If the palette is
+not explicitly specified, the current value of the -gtk-icon-palette property
+is used.
+
+GTK supports scaled rendering on hi-resolution displays. This works best if
+images can specify normal and hi-resolution variants. From CSS, this can be
+done with
+
+```
+-gtk-scaled(Image1, Image2)
+```
+
+## GTK CSS Properties
+
+| Property | Reference | Notes |
+|:-----------|:----------|:------|
+|color | [CSS Color Level 3](https://www.w3.org/TR/css3-color/#foreground) | |
+|opacity | [CSS Color Level 3](https://www.w3.org/TR/css3-color/#opacity) | |
+|filter | [CSS Filter Effect Level 1](https://drafts.fxtf.org/filters/#FilterProperty) | |
+|font-family | [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-family-prop) | defaults to gtk-font-name setting |
+|font-size | [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-size-prop) | defaults to gtk-font-name setting |
+|font-style | [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-style-prop) | |
+|font-variant| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#descdef-font-variant) | only CSS2 values supported |
+|font-weight | [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-weight-prop) | |
+|font-stretch| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-stretch-prop) | |
+|font-kerning| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-kerning-prop) | |
+|font-variant-ligatures| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-ligatures-prop) | |
+|font-variant-position| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-position-prop) | |
+|font-variant-caps| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-position-prop) | |
+|font-variant-numeric| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-numeric-prop) | |
+|font-variant-alternates| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-alternates-prop) | |
+|font-variant-east-asian| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-east-asian-prop) | |
+|font-feature-settings| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-feature-settings-prop) | |
+|font-variation-settings| [CSS Fonts Level 4](https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def) | |
+|-gtk-dpi|[Number](https://www.w3.org/TR/css3-values/#number-value) | defaults to screen resolution |
+|font| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-prop) | CSS allows line-height, etc |
+|font-variant| [CSS Fonts Level 3](https://www.w3.org/TR/css3-fonts/#font-variant-prop) | |
+|caret-color|[CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#caret-color) | CSS allows an auto value |
+|-gtk-secondary-caret-color|[Color](https://www.w3.org/TR/css-color-3/#valuea-def-color) | used for the secondary caret in bidirectional text |
+|letter-spacing| [CSS Text Level 3](https://www.w3.org/TR/css3-text/#letter-spacing) | |
+|text-decoration-line| [CSS Text Decoration Level 3](https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property) | CSS allows overline |
+|text-decoration-color| [CSS Text Decoration Level 3](https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property) | |
+|text-decoration-style| [CSS Text Decoration Level 3](https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property) | CSS allows dashed and dotted |
+|text-shadow| [CSS Text Decoration Level 3](https://www.w3.org/TR/css-text-decor-3/#text-shadow-property) | |
+|text-decoration| [CSS Text Decoration Level 3](https://www.w3.org/TR/css-text-decor-3/#text-decoration-property) | |
+|-gtk-icon-source| [Image](https://www.w3.org/TR/css-backgrounds-3/#typedef-image), `builtin` or `none` | used for builtin icons in buttons and expanders |
+|-gtk-icon-size| [Length](https://www.w3.org/TR/css3-values/#length-value) | size used for builtin icons in buttons and expanders |
+|-gtk-icon-style| `requested`, `regular` or `symbolic` | preferred style for application-loaded icons |
+|-gtk-icon-transform| [Transform list](https://drafts.csswg.org/css-transforms-1/#typedef-transform-list) or `none` | applied to builtin and application-loaded icons |
+|-gtk-icon-palette| Color palette, as explained above | used to recolor symbolic icons |
+|-gtk-icon-shadow| [Shadow](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) or `none` | applied to builtin and application-loaded icons |
+|-gtk-icon-filter| [Filter value list](https://www.w3.org/TR/filter-effects-1/#typedef-filter-value-list) or `none` | applied to builtin and application-loaded icons |
+|transform| [CSS Transforms Level 2](https://drafts.csswg.org/css-transforms-2/) | |
+|min-width| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#min-width) | CSS allows percentages |
+|min-height| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#min-height) | CSS allows percentages |
+|margin-top| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#margin-top) | CSS allows percentages or auto |
+|margin-right| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#margin-right) | CSS allows percentages or auto |
+|margin-bottom| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#margin-bottom) | CSS allows percentages or auto |
+|margin-left| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#margin-left) | CSS allows percentages or auto |
+|padding-top| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#padding-top) | CSS allows percentages |
+|padding-right| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#padding-right) | CSS allows percentages |
+|padding-bottom| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#padding-bottom) | CSS allows percentages |
+|padding-left| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#padding-left) | CSS allows percentages |
+|margin| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#margin) | a 'four sides' property |
+|padding| [CSS Box Model Level 3](https://www.w3.org/TR/css3-box/#padding) | a 'four sides' property |
+|border-top-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-width) | CSS allows other values |
+|border-right-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-width) | CSS allows other values |
+|border-bottom-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-width) | CSS allows other values |
+|border-left-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-width) | CSS allows other values |
+|border-top-style| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-style) | |
+|border-right-style| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-style) | |
+|border-bottom-style| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-style) | |
+|border-left-style| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-style) | |
+|border-top-right-radius| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-radius) | |
+|border-bottom-right-radius| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-radius) | |
+|border-bottom-left-radius| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-radius) | |
+|border-top-left-radius| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-radius) | |
+|border-top-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-color) | |
+|border-right-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-color) | |
+|border-bottom-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-color) | |
+|border-left-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-color) | |
+|border-image-source| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-image-source) | |
+|border-image-repeat| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-image-repeat) | |
+|border-image-slice| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-image-slice) | a 'four sides' property |
+|border-image-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-image-width) | a 'four sides' property |
+|border-width| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-width) | a 'four sides' property |
+|border-style| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#the-border-style) | a 'four sides' property |
+|border-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-color) | a 'four sides' property |
+|border-top| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-top) | |
+|border-right| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-right) | |
+|border-bottom| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-bottom) | |
+|border-left| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-left) | |
+|border| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border) | |
+|border-radius| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-radius) | |
+|border-image| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#border-image) | |
+|outline-style| [CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#outline-style) | initial value is none, auto is not supported |
+|outline-width| [CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#outline-width) | |
+|outline-color| [CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#outline-color) | initial value is currentColor, invert is not supported |
+|outline-offset| [CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#outline-offset) | |
+|outline| [CSS Basic User Interface Level 3](https://www.w3.org/TR/css3-ui/#propdef-outline) | |
+|background-color| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-color) | |
+|background-clip| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-clip) | |
+|background-origin| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-origin) | |
+|background-size| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-size) | |
+|background-position| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-position) | |
+|background-repeat| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-repeat) | |
+|background-image| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background-image) | not supported: urls without quotes, colors in crossfades |
+|box-shadow| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#box-shadow) | |
+|background-blend-mode| [CSS Compositing and Blending Level 1](https://www.w3.org/TR/compositing-1/#propdef-background-blend-mode) | only affects multiple backgrounds |
+|background| [CSS Backgrounds and Borders Level 3](https://www.w3.org/TR/css3-background/#background) | |
+|transition-property| [CSS Transitions](https://www.w3.org/TR/css3-transitions/#transition-property) | |
+|transition-duration| [CSS Transitions](https://www.w3.org/TR/css3-transitions/#transition-duration) | |
+|transition-timing-function| [CSS Transitions](https://www.w3.org/TR/css3-transitions/#transition-timing-function) | |
+|transition-delay| [CSS Transitions](https://www.w3.org/TR/css3-transitions/#transition-delay) | |
+|transition| [CSS Transitions](https://www.w3.org/TR/css3-transitions/#transition) | |
+|animation-name| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-name) | |
+|animation-duration| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-duration) | |
+|animation-timing-function| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-timing-function) | |
+|animation-iteration-count| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-iteration-count) | |
+|animation-direction| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-direction) | |
+|animation-play-state| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-play-state) | |
+|animation-delay| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-delay) | |
+|animation-fill-mode| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation-fill-mode) | |
+|animation| [CSS Animations Level 1](https://www.w3.org/TR/css3-animations/#animation) | |
+|border-spacing| [CSS Table Level 3](https://www.w3.org/TR/css-tables-3/#border-spacing-property) | respected by GtkBox and GtkGrid |
projects / gtk4.git / commitdiff